<template>
  <div class="index-bar-list">
    <!-- 全选按钮 -->
    <FGCheckCell
      v-if="type == 'checkbox' && hasAllCheck && list.length"
      :title="checkAll ? '取消全选' : '全选'"
      :value.sync="checkAll"
      :shape="shape"
      :position="position"
      @clickCell="toggleAll(checkAll)"
    />
    <!-- 人员列表（图像+姓名 + 复选框） 组件 -->
    <van-checkbox-group ref="checkboxGroup" v-model="checked" @change="changeList">
      <van-cell-group inset>
        <!-- [1] 用于在非 索引列表的情况下，需要将当前列表循环渲染一次 -->
        <div v-for="indexItem in indexBar ? indexList : [1]" :key="indexItem.index">
          <van-index-anchor :key="indexItem.index" v-if="indexBar">
            {{
            indexItem.title
            }}
          </van-index-anchor>
          <template v-for="item in list">
            <van-cell
              :class="['hu_cell', item.disabled ? 'hu_cell--disabled' : '']"
              v-if="item[props.index] === indexItem.index || !indexBar"
              clickable
              :key="item[props.id]"
              @click.stop="toggle(item)"
            >
              <template v-slot:[dynamicslotname]>
                <van-checkbox
                  :class="{ 'hu-checkCell--square': shape == 'square' }"
                  :name="item[props.id]"
                  :shape="shape"
                  :ref="'checkboxes' + item[props.id]"
                  :style="changStyle"
                  :disabled="item.disabled"
                  @click.stop
                >
                  <template #icon="props" v-if="svgIcon">
                    <svg-icon :iconClass="props.checked ? svgIcon : ''" class="hu-close"></svg-icon>
                  </template>
                </van-checkbox>
              </template>
              <!-- 用户头像+名称 -->
              <FGNameImg
                class="hu-userListGroup-HuNameImg"
                :name="item[props.name]"
                :portraitURL="item[props.portraitURL] || defaultImage"
              />
            </van-cell>
          </template>
        </div>
        <!-- </van-index-bar> -->
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
import FGNameImg from "./FGNameImg";
import FGCheckCell from "./FGCheckCell";
export default {
  name: "FGCheckList",
  components: {
    FGNameImg,
    FGCheckCell,
  },
  props: {
    list: {
      // 人员列表
      /**
       * {
       *    index:'索引值'，当列表中某些列表项的索引值相同时，将该组列表项排在同一对应索引文字下
       *    title:'', 索引值展示的头部文字
       *    name:'名称'
       *    id:'用户ID',
       *    portraitURL:'头像url',
       * }
       */
      type: Array,
      default: () => [],
    },
    // 配置选项名称，将list 中的属性名称修改为自定义字段，如
    /**
     *  {
     *    name: "title",
     *     id: "userID",
     *   }
     *   即代表将list中的列表属性名称为 name 和 id 的分别改为 title 和 userID
     */
    props: {
      type: Object,
      default: () => {
        return {
          index: "index",
          title: "title",
          name: "name",
          id: "id",
          portraitURL: "portraitURL",
        };
      },
    },

    // 是否显示索引值，若需要显示索引值，则列表中必须包括索引值属性 index
    indexBar: {
      type: Boolean,
      default: false,
    },

    checkeds: {
      // 选中的列表
      type: Array,
      default: () => [],
    },
    // 选择框类型，默认为多选'checkbox'，可改为单选：'radio'
    type: {
      type: String,
      default: "checkbox",
    },
    position: {
      // left-多选框在左侧，right-多选框在右侧
      type: String,
      default: "left",
    },
    // 选框选中图标
    svgIcon: {
      type: String,
      default: "",
    },
    // 形状，可选值 round（圆形）
    shape: {
      type: String,
      default: "square",
    },
    // 默认头像
    defaultImage: {
      type: String,
      default: "",
    },
    // 是否跳过禁用
    skipDisabled: {
      type: Boolean,
      default: false,
    },
    // 是否开启全选，默认开启
    hasAllCheck: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      checked: [],
      checkAll: false, // 全选
    };
  },

  computed: {
    // 获取所有首字母集合
    indexList() {
      let arr = [];
      // 关闭索引值显示
      if (!this.indexBar) {
        return arr;
      }
      // 获取所有的索引值，并去重
      let ids = [...new Set(this.getKeyArray(this.props.index, this.list))];
      ids.forEach((id) => {
        // 根据索引值获取对应的索引名称并显示
        arr.push({
          index: id, // 索引值
          title: this.list.find((it) => it[this.props.index] == id)[
            this.props.title
          ], // 对应索引值显示的文字
        });
      });
      return arr;
    },
    // 插槽名称
    dynamicslotname() {
      return {
        left: "icon",
        right: "right-icon",
      }[this.position];
    },
    // 选框样式
    changStyle() {
      return {
        left: { marginRight: "13px" },
        right: { marginLeft: "13px" },
      }[this.position];
    },
  },

  watch: {
    // 回显已选中数据
    checkeds: {
      handler(nd) {
        if (nd.length != this.checked.length) {
          this.checked = this.getKeyArray(this.props.id, nd);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getKeyArray(key, array) {
      let arr = [];
      array.forEach((el) => {
        arr.push(el[key]);
      });
      return arr;
    },
    toggle(item) {
      // 按钮禁用
      if (item.disabled) {
        return;
      }
      this.$refs["checkboxes" + item[this.props.id]][0].toggle();
      // 单选
      if (this.type === "radio") {
        this.checked = [];
        this.callBack([item]);
      }
    },
    // 选中人员改变 回传数据给父组件
    changeList(val) {
      if (this.type == "checkbox") {
        let arr = this.list.filter(
          (item) => val.indexOf(item[this.props.id]) > -1
        );
        this.callBack(arr);
      }
      this.checkAll = this.list.length === this.checked.length;
    },

    // 数据回传
    callBack(val) {
      this.$emit("change", val);
      this.$emit("update:checkeds", val);
    },
    // 全选
    toggleAll(val) {
      setTimeout(() => {
        if (val) {
          this.$refs.checkboxGroup.toggleAll({
            checked: val,
            skipDisabled: this.skipDisabled, // 跳过禁用的复选框
          });
        } else {
          this.$refs.checkboxGroup.toggleAll({
            skipDisabled: this.skipDisabled,
          });
        }
      }, 100);
    },
    // 选中对应数据  外部调用回显选中
    checkList(list) {
      list.forEach((item) => {
        // 添加延迟
        setTimeout(() => {
          if (this.$refs["checkboxes" + item[this.props.id]].length > 0) {
            this.$refs["checkboxes" + item[this.props.id]][0].toggle(true);
          }
        }, 100);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Fg-phone {
  .hu-checkCell--square {
    :deep(.van-checkbox__icon .van-icon) {
      border-radius: 3px;
    }
  }
  .hu-index-bar {
    background-color: transparent;
  }

  .hu-close {
    color: #d81e06;
  }

  .van-cell-group--inset {
    background-color: transparent;
    margin: 0;
    border-radius: 0;
  }

  .hu_cell {
    background-color: #fff;
  }

  .hu_cell--disabled {
    color: #c8c9cc;
    .hu-close {
      color: #f88b93;
    }
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba($color: #c8c9cc, $alpha: 0.1);
      z-index: 1;
    }
  }
}
</style>
